<template>
	<!-- 为什么学习指令,加快页面的构建 -->
	{{ html }}
	<!-- v-html 如果有标签会将标签渲染  -->
	<div v-html="html"></div>
	<!-- 只能将数据原样输出 不许放数据 -->
	<p v-text="html"></p>
	<!-- <div v-if="age > 5">
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</div> -->

	<!-- <div v-if="age > 5">div1</div>
	<div v-if="age > 5">div2</div>
	<div v-if="age > 5">div3</div> -->
	<!-- v-slot -->
	<!--  渲染多个标签 -->
	<template v-if="age > 5">
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</template>

	<!-- 指令里边可以是表达式 -->
	<div v-if="3 * 2 > 2">我是if22222</div>
	<!--   v-else 不许单独使用,只会和最近的if 生效 -->
	<div v-else>我是else</div>

	<!-- 标签一定会被创建,v-show display 需要切换某个按钮或者页面的显示, -->
	<div v-show="age > 5">我显示了</div>
	<!-- v-if 权限 展示页面 就会判断出 -->
	<!-- 如果是数字,数字从1开始 -->
	<!-- 如果是对 对象循环,value -->
	<div v-for="(aa, key, i) in obj">
		{{ aa }} {{ key }},{{ i }}
	</div>

	<!-- 绑定的是dom 的属性 绑定变量的值, -->
	<div v-bind:class="cla"> 我是v-bind</div>

	<div v-bind:class="cla + '2'" v-bind:name="obj['school']"> 我是v-bind</div>
	<div v-bind:class="obj['school']"> 我是v-bind</div>

	<!-- 元素的属性和变量整合到到一起 -->
	<div v-bind:id="name + '-00000'" :num="age * 2 + 3" :is="istrue ? '真真的' : '夹'" :arr="arr.filter((item) => item > 15)">
		阿斯顿发大水
	</div>

	<!-- 直接给一个对象 -->
	<div v-bind="obj" > v-bind="obj"  相当于 v-bind:num=obj.num  </div>
	<!--  v-pre 会告诉vue 不需要解析 里边的表达式,编译速度会变快 -->
	<div v-pre>{{}}</div>
	<!-- v-once 只渲染一次,响应式数据再变,不改变  -->
	<div v-once>{{ name }} </div>
	<p> {{ name }} </p>
</template>

<script>
export default {
	name: 'app'
}
</script>
<script setup>

import { ref } from 'vue'
let name = ref('张三')
let age = ref(10)
let cla = "head"
let istrue = ref(true)
let arr = [10, 20, 30]
let obj = { num: '10086', school: '青芒' }
let html = `<h1>我是h11111111</h1>`
</script>

<style></style>
